<html>
    <head>
        <title>渲染和提交</title>
    </head>
    <body>
        <script>
            // 渲染和提交
                            /*
                                    在你的组件显示在屏幕上之前，它们必须由React渲染。
                                    了解此步骤将帮助你思考代码的执行方式并解释其行为。


                                    想象一下，你的组件时厨房里的初始，用石材烹制美味佳肴。在这个场景下，React是一个服务员，负责接收客户请求并为他们当来订单。
                                    这个"请求" 和 "提供UI"的过程分为三步：
                                        ①、触发渲染（用户点单，然后服务员将菜单送给厨房）
                                        ②、渲染组件(厨师按照菜单烹饪菜肴）
                                        ③、提交给DOM (将菜肴放在餐桌上)
                            */


                    // 一、步骤一：  触发渲染
                                /*      
                                    触发组件渲染的原因有两个：
                                        1、这是组件的"初始渲染"
                                        2、组件(或其父级)的状态已更新。
                                */

                                // 1、初始渲染
                                        /*
                                            当你的应用启动时，你需要触发初始渲染。
                                            框架和沙箱有时会隐藏此代码，单它是通过使用目标DOM节点，调用 createRoot()创建组件的根元素，
                                            然后在根元素上盗用 render()方法来渲染组件。
                                        */
                                        // Gallery.js:
                                                function Image() {
                                                    return (
                                                        <img
                                                        src="https://i.imgur.com/ZF6s192.jpg"
                                                        alt="'Floralis Genérica' by Eduardo Catalano: a gigantic metallic flower sculpture with reflective petals"
                                                        />
                                                    );
                                                }
                                                export default function Gallery() {
                                                    return (
                                                        <section>
                                                        <h1>Inspiring Sculptures</h1>
                                                        <Image />
                                                        <Image />
                                                        <Image />
                                                        </section>
                                                    );
                                                }

                                        // index.js ：
                                                import Image from './Image.js';
                                                import { createRoot } from 'react-dom/client';

                                                const root = createRoot(document.getElementById('root'))
                                                root.render(<Gallery />);

                                // 2、状态更新时重新渲染
                                        /*
                                            组件最初渲染后，你可以通过 "状态设置函数" 更新其状态来触发进一步的渲染。
                                            更新组件状态会"自动对渲染进行排队"。（你可以把这些想象成餐厅客人在第一次点菜后点茶、甜点和各种各样的东西，这取决于他们的口渴或饥饿状态）
                                        */

                // 二、步骤二： React渲染你的组件(调用组件函数)

                        /*
                            触发渲染后，React会调用你的组件来确定要在屏幕上显示的内容。
                            "渲染"其实是React调用你的组件函数。

                                在初始渲染时，React将调用根组件。
                                对于后续的渲染，React将调用其状态更新触发渲染的组件函数。
                            
                            这个过程是递归的：
                                如果更新的组件返回一些其他组件，React将加下来渲染该组件，如果该组件又返回了其他子组件，它将继续渲染该组件的子组件，以此类推。
                                这个过程将会一直延续到没有更多的嵌套组件且React确切的知道应该在屏幕上显示什么。

                                也就是说，渲染父组件会造成子组件的渲染，子组件会造成子组件的子组件的渲染，以此类推，递归下去，直到所有二组件都被渲染。
                        */

                // 三、步骤三：React提交对DOM的更改。
                        /*
                            在渲染(调用组件函数)之后，React将会修改实际DOOM。
                                对于初始渲染：  React将使用 appendChild()  DOM API 将创建的所有DOM节点放在屏幕上。
                                对于重新渲染：  React将应用最少的必要操作(在渲染时计算) 以使DOM匹配最新的渲染输出。

                            如果两次渲染(组件函数调用)之间存在差异，React只会修改DOM，不会重新渲染组件实例对应的DOM。(也就是说，两次渲染相同的部分始终会保存在DOM里不变)
                        */
        </script>
    </body>
</html>